import { t } from 'i18next'
import React, { FC } from 'react'
import { RightWrap } from '../../components'
import FileWrap from './FileWrap'
import { useData } from './hooks'
import { HeaderWrap, FileIcon, ProgressBtnIcon, StyledPlayVideo } from './style'
import { Slider, Button } from '@kedacom/react-next'
import { formatSeconds } from '@/utils/format'

const btnWidth = 88

const PlayVideo: FC = () => {
	const {
		handleBack,
		isShow,
		handleFile,
		onClose,
		onOk,
		progress,
		setProgress,
		handleDragProgress,
		handleChangeProgress,
		info,
		...data
	} = useData()
	// let create_time =info && info.create_time
	// 	? dayjs(info.create_time).format('YYYY-MM-DD HH:mm:ss')
	// 	: ''
	let name = info?.name ?? ''
	if (name.indexOf('.asf') !== -1) {
		name = name.split('.asf')[0]
	}
	return (
		<StyledPlayVideo className="play-video-wrap">
			<RightWrap
				title={t('会议放像')}
				onBack={handleBack}
				action={
					//放像文件存在就展示相关播放按钮
					<div className={`btn-wrap ${info && info.name ? 'show' : 'hidden'}`}>
						{info?.state === 1 && (
							<Button width={btnWidth} onClick={() => data.onClickContinuePlay()}>
								{t('恢复放像')}
							</Button>
						)}
						{info?.state === 2 && (
							<Button width={btnWidth} onClick={() => data.onClickPausePlay()}>
								{t('暂停放像')}
							</Button>
						)}
						{info?.state === 0 && (
							<Button width={btnWidth} onClick={() => data.onClickStartPlay()}>
								{t('开始放像')}
							</Button>
						)}
						{info?.state !== 0 && (
							<Button className="stop-btn" width={btnWidth} onClick={() => data.onClickStopPlay()}>
								{t('停止放像')}
							</Button>
						)}
					</div>
				}
			>
				<HeaderWrap className="file-wrap">
					<div>{t('会议放像文件选择')}</div>
					<FileIcon
						className={`${info && info.state !== 0 ? 'disabled' : 'normal'}`}
						onClick={handleFile}
					></FileIcon>
				</HeaderWrap>
				<FileWrap isOpen={isShow} onOk={onOk} onIconClose={onClose}></FileWrap>
				{info && info.name && (
					<div className="slider-info-wrap">
						<div className="meeting-info">
							<span title={name}>{name}</span>
							{/* <span className="create_time">{create_time}</span> */}
						</div>
						<Slider
							className="slider"
							value={progress}
							width={data.sliderWidth}
							onChange={(val) => {
								handleChangeProgress(val)
							}}
							onClick={(val) => {
								handleDragProgress(val)
							}}
							disabled={info.state === 0}
							onDragEnd={(e, val) => {
								handleDragProgress(val)
							}}
							strokeColor="#007ac0"
							barColor="#e5e5e5"
							height={26}
						>
							<ProgressBtnIcon></ProgressBtnIcon>
						</Slider>
						<div className="time-wrap">
							<span>{formatSeconds(info?.playback_duration ?? '0')}</span>
							<span>/</span>
							<span>{formatSeconds(info?.duration ?? '0')}</span>
						</div>
					</div>
				)}
			</RightWrap>
		</StyledPlayVideo>
	)
}
export default PlayVideo
